<template>
    <div>
<!--      面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
<!--      卡片视图区域-->
      <el-card>
        <el-row>
          <el-col>
            <el-button type="primary" @click="showCategoryDialog">添加分类</el-button>
          </el-col>
        </el-row>
<!--        树形组件-->
        <tree-table :data="categoryList" :columns="columns" border stripe :expand-type="false"
                    :show-index="true" index-text="#" :selection-type="false" class="treeTable">
          <template slot="isOk" slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color: green"></i>
            <i class="el-icon-error" v-else style="color: red"></i>
          </template>
          <template slot="order" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
            <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
          </template>
          <template slot="opt" slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCate(scope.row.cat_id)" >删除</el-button>
          </template>
        </tree-table>
<!--        分页区域-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum" :page-sizes="[3, 5, 10, 20]" :page-size="queryInfo.pagesize"
          :total="total" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-card>
<!--      添加分类对话框-->
      <el-dialog title="添加分类" :visible.sync="addCategoryDialogVisible" width="50%" @close="addCategoryDialogClosed">
        <el-form :model="addCategoryForm" :rules="addCategoryFormRules" ref="addCategoryFormRef" label-width="100px">
          <el-form-item label="分类名称:" prop="cat_name">
            <el-input v-model="addCategoryForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类:">
<!--            options 用来指定数据源 props 用来指定配置对象-->
            <el-cascader v-model="selectedKeys"
                         :options="parentCategoryList"
                         :props='cascaderProps'
                         @change="parentCategoryChanged" clearable class="addCategory"></el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addCategoryDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCategory">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑分类的对话框 -->
      <el-dialog title="编辑分类" :visible.sync="editCateDialogVisible" width="50%">
        <el-form :model="editCateForm" :rules="editCateFormRules" ref="editCateFormRef" label-width="100px">
          <el-form-item label="分类名称：" prop="cat_name">
            <el-input v-model="editCateForm.cat_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="editCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="eidtCate">确 定</el-button>
      </span>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: 'Categories',
    data(){
      return{
        //查询条件
        queryInfo:{
          type:3,
          pagenum:1,
          pagesize:5
        },
        categoryList:[],
        total:0,
        //为table指定列的定义
        columns:[
          {
            label:'分类名称',
            prop:'cat_name'
          },
          {
            label:'是否有效',
            //表示将当前列定义为模板列
            type:'template',
            //表示当前这一列使用的模板名称
            template:'isOk'
          },
          {
            label: '排序',
            type: 'template',
            template: 'order'
          },
          {
            label: '操作',
            type: 'template',
            template: 'opt'
          }
        ],
        addCategoryDialogVisible:false,
        addCategoryForm:{
          cat_name:'',
          //父级分类的id
          cat_pid:0,
          //分类的等级，默认要添加的是1级分类
          cat_level:0
        },
        addCategoryFormRules:{
          cat_name:[
            {required:true,message:'请输入分类名称',trigger:'blur'}
          ]
        },
        //父级分类的列表
        parentCategoryList:[],
        //指定级联选择器的配置对象
        cascaderProps:{
          value:'cat_id',
          label:'cat_name',
          children:'children',
          // checkStrictly:true,
          expandTrigger:'hover',
        },
        //选中的父级分类的id数组
        selectedKeys:[],
        //控制编辑对话框的显示与隐藏
        editCateDialogVisible:false,
        //编辑分类的表单数据
        editCateForm:{},
        //编辑表单的验证规则对象
        editCateFormRules:{
          cat_name:[
            { required: true, message: '请输入分类名称', trigger: 'blur' }
          ]
        }

      }
    },
    created() {
      this.getCategoryList()
    },
    methods:{
     async getCategoryList(){
       const {data:res}=await this.$http.get('categories',{params:this.queryInfo})
       if(res.meta.status!==200){
         return this.$message.error(res.meta.msg)
       }
       this.categoryList=res.data.result
       console.log(this.categoryList)
       this.total=res.data.total
     },
      //监听pagesize的改变
     handleSizeChange(newSize){
       this.queryInfo.pagesize=newSize
       this.getCategoryList()
     },
      //监听pagenum的改变
     handleCurrentChange(newPage){
       this.queryInfo.pagenum=newPage
       this.getCategoryList()
     },
     showCategoryDialog(){
       this.getParentCategoryList()
       this.addCategoryDialogVisible=true
     },
      //获取父级分类的数据列表
     async getParentCategoryList(){
       const {data:res}=await this.$http.get('categories',{params:{type:2}})
       if(res.meta.status!==200){
         return this.$message.error(res.meta.msg)
       }
       this.parentCategoryList=res.data
     },
      //选择项发生变化触发这个函数
     parentCategoryChanged(){
       //如果selectedKeys 数组中的length大于0，证明选中的父级分类，反之，就说明没有选中任何父级分类
       if(this.selectedKeys.length>0){
         //父级分类的id
         this.addCategoryForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
         //为当前分类的等级赋值
         this.addCategoryForm.cat_level=this.selectedKeys.length
         return
       }else {
         //父级分类的id
         this.addCategoryForm.cat_pid=0
         //为当前分类的等级赋值
         this.addCategoryForm.cat_level=0
       }
     },
      //点击按钮，添加新的分类并保存
     async addCategory(){
       //预校验
       this.$refs.addCategoryFormRef.validate(valid=>{
         if(!valid) return
       })
       //如果是对象类型的参数，不要加{params:}
       const {data:res}=await this.$http.post('categories',this.addCategoryForm)
       console.log(res)
       if (res.meta.status!==201){
         return this.$message.error(res.meta.msg)
       }
       this.$message.success('添加分类成功！')
       this.addCategoryDialogVisible=false
       this.getCategoryList()
     },
      //监听对话框的关闭事件，重置表单数据
     addCategoryDialogClosed(){
       this.$refs.addCategoryFormRef.resetFields()
       //selectedKeys是选择框里面显示的数据对应着cat_name
       this.selectedKeys=[]
       this.addCategoryForm.cat_level=0
       this.addCategoryForm.cat_pid=0
     },
      //显示编辑对话框
     async showEditCateDialog(id){
       const { data: res } = await this.$http.get('categories/' + id)
       if (res.meta.status !== 200) return this.$message.error('获取分类失败！')
       this.editCateForm = res.data
       this.editCateDialogVisible=true
     },
      // 编辑分类名
     eidtCate () {
        this.$refs.editCateFormRef.validate(async valid => {
          if (!valid) return
          const { data: res } = await this.$http.put('categories/' + this.editCateForm.cat_id,
            {
              cat_name: this.editCateForm.cat_name
            })
          if (res.meta.status !== 200) return this.$message.error('更新分类名失败！')
          this.$message.success('更新分类名成功！')
          this.getCategoryList()
          this.editCateDialogVisible = false
        })
      },
     // 删除分类
     async removeCate (id) {
        const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (confirmResult !== 'confirm') { return this.$message.info('已取消删除！') }
        const { data: res } = await this.$http.delete('categories/' + id)
        if (res.meta.status !== 200) { return this.$message.error('删除商品分类失败！') }
        this.$message.success('删除商品分类成功！')
        this.getCategoryList()
      }
    }
  }
</script>

<style scoped lang="less">
.treeTable{
  margin-top: 15px;
}
.addCategory{
  width: 100%;
}
</style>
